*,
*:after,
*:before {
	margin: 0;
	padding: 0;
	@include border-box;
}

/* scroll bars */
::-webkit-scrollbar-track-piece {
	background-color: $i-color-2;
	-webkit-border-radius: 11px;
}

/* use subtle scroll bars in webkit*/
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: $i-color-2;
}

::-webkit-scrollbar-thumb {
	background: $i-color-2;
}
::-webkit-scrollbar-track-piece { 
	background: $i-color-1; 
}

/* Normalize horizontal line */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ddd;
}
/* Responsive media */
img,
video,
audio,
embed,
object {
	max-width: 100%;
}
img,
video,
embed,
object {
	height: auto;
}
embed,
object {
	height: 100%;
}
img {
	vertical-align: middle;
	-ms-interpolation-mode: bicubic;
}

/* =Line height and margin
-----------------------------------------------------------------------------*/
p,
ul,
ol,
dl,
dd,
dt,
blockquote,
td,
th {
	line-height: 1.65em;
}
ul,
ol,
ul ul,
ol ol,
ul ol,
ol ul {
	margin: 0 0 0 $margin;
}
ul li,
ol li {
	text-align: left;
}
ol ol li {
	list-style-type: lower-alpha;
}
ol ol ol li {
	list-style-type: lower-roman;
}
p,
ul,
ol,
dl,
blockquote,
hr,
pre,
form,
fieldset,
figure,
address {
	margin-bottom: $margin;
}

p, blockquote, address, span {
	line-height: $line-height;
	font-size: $font-size;
}

blockquote {
	position: relative;
	font-style: italic;
	margin-left: 2.4749999999999996em;
	padding-left: 1.65em;
	border-left: 2px solid #dddddd;
}
blockquote p {
	margin-bottom: .5em;
}
blockquote small,
cite {
	color: rgba(0, 0, 0, 0.4);
	font-style: italic;
}
small,
blockquote cite {
	font-size: 12.75px;
	line-height: 1;
}
address {
	font-style: normal;
}

dl dt {
	font-weight: bold;
}
dd {
	margin-left: 1.65em;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ddd;
}

html {
	position: relative;
	min-height: 100%;
}

body {
	font-family: $p-font-family;
}

h1, h2, h3, h4, h5, h6 {
	margin: $p-size 0;
	text-rendering: optimizeLegibility;
	a {
		text-decoration: none;
		color: $i-color-2;
	}
}

a {
	color: $p-color-1;
	transition: all 0.3s ease-out;
}

pre {
	white-space: pre-wrap; //css3
	white-space: moz-pre-wrap; //firefox
	white-space: -pre-wrap; //opera 4-6
	white-space: -o-pre-wrap; //opera 7
	word-wrap: break-word; //internet explorer
}

code { display: block; }

img {
	width: auto;
	max-width: 100%;
	height: auto; 
}

button {
	transition: all 0.3s ease-out;
	border: thin solid $button-border-color;
	background-color: $button-background-color;
	font-family: $button-font-family;
	color: $button-color;
	padding: $button-padding;
	font-weight: bold;
	a {
		color: $button-color;
		text-decoration: none;
	}
}
button:hover {
	border: thin solid $button-hover-border-color;
	background-color: $button-hover-background-color;
	color: $button-hover-color;
	cursor: pointer;
	a {
		color: $button-hover-color;
	}
}

/* Code ----------------------------*/
pre,
code,
kbd,
samp,
var,
output {
	font-family: $c-font-family;
	font-style: normal;
	font-size: 90%;
}
code,
samp,
kbd {
	padding: 3px 6px;
	display: inline-block;
	line-height: 1;
}
code {
	background: #f4f4f4;
	border: 1px solid #d4d4d4;
}
var {
	color: rgba(0, 0, 0, 0.5);
}
samp {
	background: $s-color-9;
	border: 1px solid $s-color-8;
}
kbd {
	background: $i-color-2;
	color: $i-color-1;
	white-space: nowrap;
}

/* =Form
-----------------------------------------------------------------------------*/
button:active,
button:focus {
	outline: none;
}
textarea,
select {
	font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
	font-size: 1em;
	box-shadow: none;
}
textarea,
select[multiple],
select[multiple="multiple"] {
	padding: 0.3em 0.35em;
	line-height: 1.35em;
	width: 100%;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="datetime-local"] {
	box-shadow: none;
	line-height: $line-height;
	border-radius: 0;
	outline: none;
}
select[multiple],
select[multiple="multiple"],
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="datetime-local"] {
	background: #ffffff;
	border: 1px solid #cccccc;
	position: relative;
	z-index: 2;
	-webkit-appearance: none;
}
textarea[disabled],
input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="phone"][disabled],
input[type="tel"][disabled],
input[type="number"][disabled],
input[type="datetime"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="color"][disabled],
input[type="time"][disabled],
input[type="search"][disabled],
input[type="datetime-local"][disabled] {
	resize: none;
	color: rgba(0, 0, 0, 0.5);
}
select[disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled] {
	cursor: default;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input[type="range"] {
	position: relative;
	top: 3px;
}
select {
	margin-bottom: 0 !important;
}
fieldset {
	padding: $padding;
	margin-bottom: $margin;
	border: 1px solid #cccccc;
}

table {
	empty-cells: show;
	th,
	td {
		border-bottom: 1px solid $s-color-12;
		padding: $padding;
	}
}